<template>
  <el-dialog
      :title="`Execute ${instanceName}`"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
    <el-form :close-on-click-modal="false" ref="form" :model="cacheCommand">
      <el-form-item prop="command">
        <el-select style="width: 100%;" placeholder="command" v-model="cacheCommand.command">
          <el-option v-for="item in commandList" :value="item" :key="item">{{ item }}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="key">
        <el-input placeholder="key" v-model="cacheCommand.key" clearable></el-input>
      </el-form-item>
      <el-form-item prop="field">
        <el-input placeholder="field" v-model="cacheCommand.field" clearable></el-input>
      </el-form-item>
      <el-form-item prop="value">
        <el-input placeholder="value" v-model="cacheCommand.value" clearable></el-input>
      </el-form-item>
      <el-form-item prop="result">
        <el-input type="textarea" v-model="cacheCommand.result" :rows="10" clearable></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">执 行</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {exec} from '@/api'

export default {
  name: "Execute",
  data() {
    this.commandList = ['get', 'set', 'del','hget', 'hset', 'hdel']
    return {
      dialogVisible: false,
      instanceName: null,
      cacheCommand: {
        command: '',
        key: '',
        field: '',
        value: '',
        result: null
      },
    }
  },
  methods: {
    handleSubmit() {
      exec({...this.cacheCommand, instanceName: this.instanceName}).then(res => {
        this.cacheCommand.result = res
      })
    },

    show(row) {
      this.instanceName = row.properties.name
      this.dialogVisible = true
    },
    handleClose() {
      this.instanceName = null
      this.$refs.form.resetFields()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
